<template>
	<view class="merchantverShop">
		<view class="title">
			<image src="../../static/img/ic_notice.png"></image>
			此页上传的图片资料仅用户店铺认证，不作其他用途
		</view>
		<photoVideo @pvimgKnow="pvimgKnow" :photoData="form.photoList[0]" style="margin-bottom: 20rpx;"></photoVideo>
		<photoVideo @pvimgKnow="pvimgKnow" :photoData="form.photoList[1]"></photoVideo>
		
		<view style="background-color: #F5F5F5;height: 20rpx;"></view>
		<view class="content">
			<view class="list">
				<view class="item">
					<view class="item_title">身份证号码</view>
					<view class="item_text">
						<input type="text" :disabled="isAssistauthreup" v-model="form.idcard" placeholder="请输入身份证号码" />
					</view>
				</view>
				<view class="item">
					<view class="item_title">持卡人</view>
					<view class="item_text">
						<input type="text" :disabled="isAssistauthreup" v-model="form.bankcardPerson" placeholder="请输入持卡人姓名" />
					</view>
				</view>
				<view class="item">
					<view class="item_title">银行卡号</view>
					<view class="item_text">
						<input type="text" :disabled="isAssistauthreup" v-model="form.bankcardNum" placeholder="请输入银行卡号" />
					</view>
				</view>
				<view class="item">
					<view class="item_title">所属银行</view>
					<picker mode="selector" :range="bankArr" :disabled="isAssistauthreup"
					 :range-key="'bank_name'" @change="bankSel($event)">
						<view class="item_text">
							<input type="text" :value="form.curBank.bank_name" disabled="true"
							 placeholder="请选择所属银行" />
							<image src="../../static/img/my_back.png"></image>
						</view>
					</picker>
				</view>
				<view class="item" v-if="!isAssistauthreup">
					<view class="item_title">开户行所在地</view>
					<view class="item_text" @click="openAddress()">
						<input type="text" :value="form.curCity.name" disabled="true"
						 placeholder="请选择开户行地理位置" />
						<image src="../../static/img/my_back.png"></image>
					</view>
				</view>
				<view class="item">
					<view class="item_title">开户支行</view>
					<picker mode="selector" :disabled="!form.curBank || !form.curCity || isAssistauthreup"
					 :range="branchbankArr"
					  :range-key="'bank_full_name'" @change="branchbankSel($event)">
						<view class="item_text" @click="branchbankFun()">
							<input type="text"
							 :value="form.curBranchbank?form.curBranchbank.bank_full_name:''"
							 disabled="true" style="width: 400rpx;"
							 placeholder="请选择开户支行" />
							<image src="../../static/img/my_back.png"></image>
						</view>
					</picker>
				</view>
			</view>
		</view>
		<view style="background-color: #F5F5F5;height: 20rpx;"></view>
		<photoVideo @pvimgKnow="pvimgKnow" :photoData="form.photoList[2]"></photoVideo>
		<view class="content" v-if="typeData.publicPrivate == 2">
			<view class="list">
				<view class="item">
					<view class="item_title">营业执照号码</view>
					<view class="item_text">
						<input type="text" v-model="form.permit_num_user" placeholder="请输入营业执照号码" @focus="focusChange" @blur="blurChange" />
					</view>
				</view>
				<view class="item">
					<view class="item_title">营业执照名称</view>
					<view class="item_text">
						<input type="text" v-model="form.permit_name_user" placeholder="请输入营业执照名称" @focus="focusChange" @blur="blurChange" />
					</view>
				</view>
				<view class="item">
					<view class="item_title">营业执照地址</view>
					<view class="item_text">
						<input type="text" v-model="form.permit_address_user" placeholder="请输入营业执照地址" @focus="focusChange" @blur="blurChange" />
					</view>
				</view>
			</view>
		</view>
		<view class="footer" :class="isSubmit?'':'footerOpacity'">
			<view class="btn">
				<button type="primary" @click="assistauthuploadFun()">提交</button>
			</view>
		</view>
		<view :class="isFocus?'h500':''"></view>
		<!-- 选择地理位置弹窗 -->
		<myAddress ref="myAddress" @getAddressdata="getAddressdata"></myAddress>
	</view>
</template>

<script>
	import { bankarea,assistauthreup,assistauthupload } from '../../api/index.js';
	import myAddress from '../../components/my-address/my-address.vue';
	import photoVideo from '../../components/photoVideo/photoVideo.vue';
	export default {
		data() {
			return {
				uid:'',
				suid:'',
				source:'', //判断当前环境是安卓还是ios
				isfoodChain:'', //判断当前用户是否选择了餐饮
				typeData:'', //传过来的值
				isSubmit:false, //判断是否可以提交
				bankArr:[], //所属银行列表
				branchbankArr:[], //支行列表
				isAssistauthreup: false, //后台是否返回了驳回数据
				form:{ //提交的数据
					photoList:[
						{
							title:'身份证',
							content:{
								'idCardFront':{ //身份证正面照
									url:'../../static/img/ic_idCard_front.png',
									fullUrl:'',
									text:'身份证正面照',
									status:0,//0:未选中 1:已选择 -1:审核失败
									isShow:true
								},
								'idCardBack':{ //身份证反面照
									url:'../../static/img/ic_idCard_back.png',
									fullUrl:'',
									text:'身份证反面照',
									status:0,
									isShow:true
								},
								'idCardHand':{ //手持身份证照
									url:'../../static/img/ic_idCard_hand.png',
									fullUrl:'',
									text:'手持身份证照',
									status:0,
									isShow:true
								}
							}
						},
						{
							title:'银行卡',
							content:{
								'openingPermit':{ //开户许可证
									url:'../../static/img/ic_openingPermit.png',
									fullUrl:'',
									text:'银行卡正面照',
									status:0,
									isShow:true
								}
							}
						},
						{
							title:'店铺',
							content:{
								'doorHead':{ //门头照
									url:'../../static/img/ic_doorHeadShot.png',
									fullUrl:'',
									text:'门头照<br/>(需拍出完整牌匾及门框)',
									status:0,
									isShow:true
								},
								'businessLicense':{ //营业执照
									url:'../../static/img/ic_businesslicense.png',
									fullUrl:'',
									text:'营业执照',
									isShow:true,
									status:0
								},
								'foodChainPermit':{ //餐饮经营许可证
									url:'../../static/img/ic_businesslicense.png',
									fullUrl:'',
									text:'餐饮经营许可证',
									isShow:true,
									status:0
								},
								'storeVideo':{ //店内环境视频
									url:'../../static/img/ic_storeEnvironmentVideo.png',
									text:'店铺环境视频<br/>(需拍出门牌及店内陈列)',
									fullUrl:'',
									type:'video',
									status:0,
									isShow:true
								}
							}
						}
					],
					idcard:'',
					bankcardPerson:'', //持卡人
					bankcardNum:'',//银行卡号
					curBank:'', //当前所属银行
					curCity:'',// 当前选中的城市(开户行所在地)
					curBranchbank:'', //当前选中的支行(包括支行名称和支行编号)
					permit_num_user:'', //营业执照号码
					permit_name_user:'', //营业执照名称
					permit_address_user:'', //营业执照地址
				},
				isFocus:false //底部输入框是否被点击
			}
		},
		onLoad:function(data){
			console.log(data)
			this.uid = this.$store.state.merchantver.uid;
			this.suid = this.$store.state.merchantver.suid;
			this.source = this.$store.state.global.source;
			this.isfoodChain = this.$store.state.merchantver.isfoodChain;
			this.typeData = data;
			this.bankArr = this.$store.state.merchantver.banks; //获取所属银行数据
			console.log(this.bankArr)
			this.getAssistauthreup()
			if(data.is_reject == 1){ //判断是否第一次报件，如果不是，则证明后台有返回驳回数据
				this.isAssistauthreup = true;
			}
		},
		methods: {
			//上传资料
			assistauthuploadFun:function(){
				if(!this.isSubmit){
					return ;
				}
				let obj = {
					uid:this.uid,//商户UID
					suid:this.suid,//门店ID
					idcard_a:this.form.photoList[0].content['idCardFront'].fullUrl, //身份证正面照
					idcard_b:this.form.photoList[0].content['idCardBack'].fullUrl,//身份证反面照
					idcard_hand:this.form.photoList[0].content['idCardHand'].fullUrl,//请上传手持身份证
					door_head:this.form.photoList[2].content['doorHead'].fullUrl,//请上传门头照
					bank_img:this.form.photoList[1].content['openingPermit'].fullUrl,//请上传银行卡照片
					video:this.form.photoList[2].content['storeVideo'].fullUrl,//请上传视频
					food_license:this.form.photoList[2].content['foodChainPermit'].fullUrl,//请上传食品许可证（外卖标签等于5餐饮时必传）
					license:this.form.photoList[2].content['businessLicense'].fullUrl,//请上传营业执照
					permit_num_user:this.form.permit_num_user,//营业执照号码(如果上传营业执照下面三个都是必填)
					permit_name_user:this.form.permit_name_user,//请输入营业执照名称
					permit_address_user:this.form.permit_address_user, //请输入营业执照地址
					corporate_account:0,//卡类型(写死)
					id_card:this.form.idcard,//身份证号码
					bank_kh_name:this.form.bankcardPerson,//持卡人
					bank_card_id:this.form.bankcardNum,//银行卡号
					khh:this.form.curBank.bank_name,//	所属银行
					khh_name:this.form.curBranchbank.bank_full_name,//银行卡支行名称
					bank_code:this.form.curBranchbank.pay_bank_num,//银行卡支行编号
					public_private:this.typeData.publicPrivate  
				}
				console.log(obj)
				assistauthupload(obj).then((res) => {
					console.log(res);
					if(res.code == 0){
						uni.showModal({
							title:'提示',
							content: '认证成功',
							complete:function(){
								uni.reLaunch({
									url: '../workbench/workbench',
								})
							}
						})
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
				}).catch((res) => {
					console.log(res)
				})
			},
			//获取以前的资料(驳回资料)
			async getAssistauthreup(){
				let that = this;
				let obj = {
					suid:this.suid
					// suid:'10001344'
				}
				let res = await assistauthreup(obj);
				console.log(res)
				if(res.code == 0){
					that.form.idcard =res.data.id_card;//身份证号
					that.form.bankcardNum = res.data.bank_card_id;//银行卡号
					that.form.curBranchbank = {
						bank_full_name: res.data.khh_name,
						pay_bank_num: res.data.bank_code
					}
					
					that.form.bankcardPerson = res.data.bank_kh_name;//持卡人
					
					let bankJx = '';
					for(let bank of that.bankArr){
						if(bank.bank_name == res.data.khh){
							bankJx = bank.bank_jx;
						}
					}
					that.form.curBank = {
						bank_name:res.data.khh,
						bank_jx: bankJx
					};//所属银行
					
					that.form.permit_num_user = res.data.permit_num_user;//营业执照号码
					that.form.permit_name_user = res.data.permit_name_user;//营业执照名称
					that.form.permit_address_user = res.data.permit_address_user; //营业执照地址
					
					res.data.tag == 5?that.isfoodChain=true:that.isfoodChain;//判断当前资料是否选择了餐饮标签
					
					if(!!res.data.public_private){
						that.typeData = {
							businessType: res.data.business_type,
							publicPrivate: res.data.public_private
						};
					}
					
					let curVal = '';
					that.form.photoList.forEach((val,index,arr)=>{
						for (let key in val.content) {
							curVal = val.content[key];
							//身份证正面照
							if(key == 'idCardFront'){
								curVal.status = res.data.idcard_a_status;
								if(curVal.status == 1 || curVal.status == -1){
									curVal.fullUrl = curVal.url = res.data.idcard_a_img;
								}
							//身份证反面照
							}else if(key == 'idCardBack'){
								curVal.status = res.data.idcard_b_status;
								if(curVal.status == 1 || curVal.status == -1){
									curVal.fullUrl = curVal.url = res.data.idcard_b_img;
								}
							//手持身份证照
							}else if(key == 'idCardHand'){
								curVal.status = res.data.idcard_hand_status;
								if(curVal.status == 1 || curVal.status == -1){
									curVal.fullUrl = curVal.url = res.data.idcard_hand_img;
								}
							//开户许可证
							}else if(key == 'openingPermit'){
								curVal.status = res.data.bank_img_status;
								if(curVal.status == 1 || curVal.status == -1){
									curVal.fullUrl = curVal.url = res.data.bank_img_img;
								}
							//门头照
							}else if(key == 'doorHead'){
								curVal.status = res.data.door_head_status;
								if(curVal.status == 1 || curVal.status == -1){
									curVal.fullUrl = curVal.url = res.data.door_head_img;
								}
							//餐饮经营许可证
							}else if(key == 'foodChainPermit'){
								curVal.status = res.data.food_license_status;
								if(curVal.status == 1 || curVal.status == -1){
									curVal.fullUrl = curVal.url = res.data.food_license_img;
								}
							//营业执照
							}else if(key == 'businessLicense'){
								curVal.status = res.data.license_status;
								if(curVal.status == 1 || curVal.status == -1){
									curVal.fullUrl = curVal.url = res.data.license_img;
								}
							//店铺环境视频
							}else if(key == 'storeVideo'){
								curVal.status = res.data.video_status;
								if(curVal.status == 2 || curVal.status == -1){
									curVal.fullUrl = res.data.video;
								}
							}
						}
					})
					
				}else{
					uni.showToast({
						icon:'none',
						title:res.msg
					})
				}
				
				if(this.typeData.publicPrivate == 2){ //判断营业执照是否显示
					this.form.photoList[2].content['businessLicense'].isShow = true;
				}else{
					this.form.photoList[2].content['businessLicense'].isShow = false;
				}
				if(this.isfoodChain == true){ //判断餐饮经营许可证是否显示
					this.form.photoList[2].content['foodChainPermit'].isShow = true;
				}else{
					this.form.photoList[2].content['foodChainPermit'].isShow = false;
				}
			},
			bankSel:function(e){
				let item = this.bankArr[e.detail.value];
				this.form.curBank = item;
				this.form.curBranchbank = '';// 开户行所在地与所属银行更改之后情空开户支行数据
			},
			openAddress:function(){
				this.$refs.myAddress.open();
				this.form.curBranchbank = ''; // 开户行所在地与所属银行更改之后情空开户支行数据
			},
			getAddressdata:function(data){
				this.form.curCity = data;
			},
			// 点击选择开户支行
			branchbankFun:function(){
				if(this.isAssistauthreup){
					return ;
				}
				if(!this.form.curBank){
					uni.showToast({
						icon:'none',
						title:'请选择所属银行'
					})
					return ;
				}else if(!this.form.curCity){
					uni.showToast({
						icon:'none',
						title:'请选择开户行地理位置'
					})
					return ;
				}
				bankarea({
					short_name:this.form.curBank.bank_jx,
					area:this.form.curCity.id
				}).then((res) => {
					console.log(res)
					if(res.code == 0){
						this.branchbankArr = res.data;
					}else{
						this.branchbankArr = [];
						console.log(res);
					}
				}).catch((e) => {
					console.log(e);
				})
			},
			//选择开户支行
			branchbankSel:function(e){
				this.form.curBranchbank = this.branchbankArr[e.detail.value]
			},
			focusChange:function(){
				this.isFocus = true;
			},
			blurChange:function(){
				this.isFocus = false;
			},
			pvimgKnow:function(data,type){
				if(type == 1){
					this.form.idcard = data.idno; //填充身份证号码
					this.form.bankcardPerson = data.name; //填充持卡人
				}else if(type == 2){
					this.form.bankcardNum = data.card_num; //填充银行卡
					this.bankArr.forEach((val,index,arr)=>{
						if(val.bank_name.indexOf(data.bank_name)>=0){
							this.form.curBank = val; //填充所属银行
						}
					})
				}else if(type == 3){
					this.form.permit_num_user = data.credit_code;//营业执照号码
					this.form.permit_name_user = data.company_name;//营业执照名称
					this.form.permit_address_user = data.address;//营业执照地址
				}
			}
		},
		watch: {
		    form: {
		        handler(options) {
					let that = this;
					let isSubmit = true;
					options.photoList.forEach((val,index,arr)=>{
						for (let key in val.content) {
							if(val.content[key].isShow===true){ //跳过不显示图片的判断
								if(!val.content[key].fullUrl && val.content[key].status==1){
									isSubmit = false;
								}
								if(val.content[key].status==0||val.content[key].status==-1){
									isSubmit = false;
								}
							}
						}
					})
					
					if(this.typeData.publicPrivate == 1){ //对私结算判断
						
					}else{ //对公结算判断
						isSubmit = isSubmit && !!options.permit_num_user && !!options.permit_name_user && !!options.permit_address_user;
					}
					isSubmit = isSubmit && !!options.idcard && !!options.bankcardPerson && !!options.bankcardNum && !!options.curBank && !!options.curBranchbank;
					this.isSubmit = isSubmit
		        },
		        deep: true
		    }
		},
		components: {
			myAddress,
			photoVideo
		}
	}
</script>

<style lang="scss" scoped>
	.merchantverShop{
		color: #333333;
		.title{
			display: flex;
			font-size: $uni-font-size-sm;
			padding: 20rpx 30rpx;
			color: #2079FF;
			background-color: #EEF5FF;
			align-items: center;
			image{
				margin-right: 20rpx;
				width: 30rpx;
				height: 30rpx;
			}
		}
		.content{
			.list{
				background-color: #FFFFFF;
				padding: 0 30rpx;
				.item{
					display: flex;
					justify-content: space-between;
					padding: 30rpx 0;
					border-bottom: 1rpx solid #EEEEEE;
					.item_title{
						color: #666666;
					}
					.item_text{
						display: flex;
						align-items: center;
						input{
							font-size: $uni-font-size-base;
							text-align: right;
							width: 400rpx;
						}
						image{
							width: 30rpx;
							height: 30rpx;
						}
					}
					&:nth-last-child(1){
						border: none;
					}
				}
			}
		}
	
		.footer{
			&.footerOpacity{
				opacity: 0.5;
			}
			background-color: #F5F5F5;
			padding: 60rpx;
			button{
				font-size: $uni-font-size-base;
				border-radius: 100rpx;
			}
		}
		
		.h500{
			height: 600rpx;
		}
	}
</style>
